<template>
  <a-modal
    v-model:visible="visible"
    width="80%"
    title="修改提现账户"
    draggable
    :body-style="{ height: '500px', overflow: 'hidden', overflowY: 'scroll' }"
    @before-ok="onOk"
  >
    <a-row justify="center">
      <a-col :span="12">
        <div class="card_wrap" v-if="detailInfo.inviteCode">
          <div class="mt-30">
            <a-form direction="vertical" auto-label-width :model="form" size="small" class="form my-10">
              <a-form-item field="paymethod" label="修改提现账号为：">
                <a-radio-group v-model="form.paymethod">
                  <a-radio value="1" :disabled="!method1Account.alipayUserName">支付宝</a-radio>
                  <a-radio value="2" :disabled="!method2Account.bankCardNum">银行卡</a-radio>
                  <a-radio value="3" :disabled="!method3Account.alipayUserName">支付宝2</a-radio>
                </a-radio-group>
              </a-form-item>
              <template v-if="form.paymethod == 1">
                <div class="flex flex-a-c">
                  <dl class="dl_wrap dl_2 flex-1">
                    <dt class="text-size-18 font-bold">提现账号：{{ '支付宝' }}</dt>
                    <dd>账号：{{ method1Account.alipayUserName }}</dd>
                    <dd>姓名：{{ method1Account.realName }}</dd>
                  </dl>
                </div>
              </template>
              <template v-if="form.paymethod == 2">
                <div class="flex flex-a-c">
                  <dl class="dl_wrap dl_1 flex-1">
                    <dt class="text-size-18 font-bold">提现账号：{{ method2Account.bankCardName }}</dt>
                    <dd>账号：{{ method2Account.bankCardNum }}</dd>
                    <dd>姓名：{{ method2Account.bankCardFullName }}</dd>
                    <dd>身份证：{{ method3Account.idCardNum }}</dd>
                  </dl>
                </div>
              </template>
              <template v-if="form.paymethod == 3">
                <div class="flex flex-a-c">
                  <dl class="dl_wrap dl_2 flex-1">
                    <dt class="text-size-18 font-bold">提现账号：{{ '支付宝' }}</dt>
                    <dd>账号：{{ method3Account.alipayUserName }}</dd>
                    <dd>姓名：{{ method3Account.alipayName }}</dd>
                    <dd>身份证：{{ method3Account.idCardNum }}</dd>
                  </dl>
                </div>
              </template>
            </a-form>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { financeDetail, financeUserWithdrawalAccountInfo, financeHandlreChangeReceiveAccount } from '@/apis'
import ImgHoverPreview from '@/components/ImgHoverPreview/index.vue'

defineOptions({ name: 'financePay' })

const emit = defineEmits(['getTableData'])

const visible = ref(false)

const detailInfo = ref({
  inviteCode: '',
  mobile: '', //手机号码
  withdrawalAmount: '',
  receiveAmount: '',
  withdrawalTime: '',
  receiveTime: '',
  withdrawalNo: '',
  alipayTradeId: '',
  withdrawalAccountInfo: {
    withdrawalMethod: '',
    withdrawalName: '',
    withdrawalAccount: ''
  },
  payAccountInfo: [],
  status: '',
  statusName: '',
  id: ''
})
const form = reactive({
  paymethod: undefined, // 打款方式
  paymethod2: '',
  name: '',
  card: '',
  id: ''
})
const method1Account = ref({})
const method2Account = ref({})
const method3Account = ref({})
const getDetail = async (params) => {
  const res = await financeDetail(params)
  detailInfo.value = res.data
  form.paymethod =
    res.data &&
    res.data.withdrawalAccountInfo &&
    res.data.withdrawalAccountInfo.withdrawalMethod &&
    res.data.withdrawalAccountInfo.withdrawalMethod == 1
      ? '1'
      : res.data.withdrawalAccountInfo.withdrawalMethod == 2
      ? '2'
      : '3' // 默认显示
  console.log(detailInfo.value, form.paymethod)
} // 获取单个详情

const openModal = (item) => {
  visible.value = true
  getUserWithdrawalAccountInfo({ userId: item.userId })
  getDetail({ id: item.id })
}
const getUserWithdrawalAccountInfo = async (params) => {
  const res = await financeUserWithdrawalAccountInfo(params)
  method1Account.value = res.data.method1Account
  method2Account.value = res.data.method2Account
  method3Account.value = res.data.method3Account
}

// 切换账户
const onOk = async () => {
  console.log(detailInfo.value)
  await financeHandlreChangeReceiveAccount({
    receiveAccountId: form.paymethod,
    userBalanceWithdrawalId: detailInfo.value.id
  })
  Message.success('操作成功')
  emit('getTableData')
  return true
}

defineExpose({ openModal })
</script>
<style lang="scss" scoped>
.card_wrap {
  .dl_wrap {
    border-radius: 10px;
    padding: 30px;
    color: #414141;
    max-width: 400px;

    dt {
      line-height: 2;
    }
    dd {
      line-height: 2;
    }
    &.dl_1 {
      background: rgba(238, 238, 238, 1);
      position: relative;
      z-index: 2;
      dt {
        color: rgba(80, 80, 80, 1);
      }
      dd {
        position: relative;
        z-index: 2;
      }
      &:after {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translate(0%, -50%);
        content: '';
        background: url('https://images.maishou88.com/admin/buyer_circle_sc/20230925/20230925153849_8160.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 83px;
        height: 83px;
        z-index: 0;
        opacity: 0.3;
      }
      //
    }
    &.dl_2 {
      background: rgba(232, 244, 255, 1);
      position: relative;
      z-index: 2;
      dt {
        color: #3e3e3e;
        position: relative;
        z-index: 2;
      }
      dd {
        position: relative;
        z-index: 2;
      }
      &:after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0%, -50%);
        content: '';
        background: url('https://images.maishou88.com/admin/buyer_circle_sc/20230925/20230925152938_4396.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 83px;
        height: 83px;
        z-index: 0;
        opacity: 0.3;
      }
    }
  }
  .custom-radio-card {
    padding: 5px 16px;
    border: 1px solid var(--color-border-2);
    width: 250px;
    box-sizing: border-box;
  }

  .custom-radio-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: bold;
  }

  .custom-radio-card:hover,
  .custom-radio-card-checked,
  .custom-radio-card:hover .custom-radio-card-mask,
  .custom-radio-card-checked .custom-radio-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked {
    background-color: var(--color-primary-light-1);
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
}
</style>
